<template>
  <!-- 心灵/管理 -->
  <van-grid :column-num="5" :border="false" icon-size="44px">
    <van-grid-item
      v-for="value of list"
      :key="value.msg"
      :icon="value.img"
      :text="value.msg"
      :to="value.path"
    />
  </van-grid>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    // 心灵/管理列表
    const list = reactive([
      {
        msg: "心灵",
        img: require("@/assets/images/首页/第一个图标@2x.png"),
      },
      {
        msg: "管理",
        img: require("@/assets/images/首页/第二个图标@2x.png"),
      },
      {
        msg: "家庭",
        img: require("@/assets/images/首页/第三个图标@2x.png"),
      },
      {
        msg: "职场",
        img: require("@/assets/images/首页/第四个图标@2x.png"),
      },
      {
        msg: "人文",
        img: require("@/assets/images/首页/第五个图标@2x.png"),
      },
      {
        msg: "心选商城",
        img: require("@/assets/images/首页/第六个图标@2x.png"),
        path: "/shopping",
      },
      {
        msg: "线下活动",
        img: require("@/assets/images/首页/第七个图标@2x.png"),
        path: "/activity",
      },
      {
        msg: "学习中心",
        img: require("@/assets/images/首页/第八个图标@2x.png"),
      },
      {
        msg: "签到",
        img: require("@/assets/images/首页/第九个图标@2x.png"),
        path: "/sign",
      },
      {
        msg: "全部分类",
        img: require("@/assets/images/首页/第十个图标@2x.png"),
      },
    ]);
    return {
      list,
    };
  },
};
</script>

<style lang="less" scoped>
// 心灵/管理
.van-grid {
  margin-bottom: 35px;
  .van-grid-item__text {
    color: #000000;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
  }
}
.van-grid-item__content {
  padding-bottom: 0;
}
</style>
